<template>
  <div class="view-container">
    <el-row :gutter="30">
      <el-col :span="12">
        <el-card>
          <el-descriptions title="CPU信息" border :column="1" label-width="30%">
            <el-descriptions-item v-for="item in serverInfo.cpuInfo" :label="item.key" label-class-name="description-label">{{ item.value }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-descriptions title="内存信息" border :column="2">
            <el-descriptions-item v-for="item in serverInfo.memoryInfo" :label="item.key" label-class-name="description-label">{{ item.value }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="24">
        <el-card>
          <el-descriptions title="服务器信息" border :column="2" label-width="15%">
            <el-descriptions-item v-for="item in serverInfo.osInfo" :label="item.key" label-class-name="description-label">{{ item.value }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="24">
        <el-card>
          <el-descriptions title="JVM信息" border :column="2" label-width="15%">
            <el-descriptions-item v-for="item in serverInfo.runtimeInfo" :label="item.key" label-class-name="description-label">{{ item.value }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="24">
        <el-card >
          <el-descriptions title="磁盘信息" border :column="3">
            <template v-for="item in serverInfo.diskInfo">
              <el-descriptions-item v-for="disk in item" :label="disk.key" label-class-name="description-label">{{ disk.value }}</el-descriptions-item>
            </template>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {onMounted} from "vue";
import {getServerInfo} from "@/api/server.js";

defineOptions({
  name: "server"
})


const serverInfo = ref({
  cpuInfo:{}
});
const handleQuery = () => {
  getServerInfo().then(res => {
    serverInfo.value = res.data
  })
}
const cpuInfo = ref([])
onMounted(() => {
  handleQuery()
})


</script>

<style>

.card-header {
  font-size: 1.2rem;
  font-weight: bold;
}

.description-label{
  background-color: var(--el-color-primary-light-8) !important;
}
</style>
